<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户管理</title>
    <link rel="stylesheet" href="../../../static/libs/layui/css/layui.css">
    <link rel="stylesheet" href="../../../static/css/commom.css">
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-form toolbar">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <select id="sltKey">
                                <option value="">搜索条件</option>
                                <option value="person_name">ID</option>
                                <option value="user_code">账号</option>
                                <option value="login_name">用户名</option>
                                <option value="phone">联系电话</option>
                                <option value="addr">联系地址</option>
                                <option value="dept_name">所属部门</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <input id="edtSearch" class="layui-input" type="text" placeholder="输入关键字">
                        </div>
                        <div class="layui-inline">
                            <button id="btnSearch" class="layui-btn icon-btn">
                                <i class="layui-icon layui-icon-search"></i>搜索
                            </button>
                        </div>
                        <div class="layui-inline">
                            <button id="btnAddUser" class="layui-btn icon-btn">
                                <i class="layui-icon layui-icon-add-1"></i>添加
                            </button>
                        </div>
                    </div>
                </div>
                <table class="layui-table" id="tableUser" lay-filter="tableUser"></table>
            </div>
        </div>
    </div>
    <!-- 表格操作列 -->
    <script type="text/html" id="tableBarUser">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        <a class="layui-btn layui-btn-xs" lay-event="reset">重置密码</a>
    </script>
    <!-- 表格状态列 -->
    <script type="text/html" id="tableStateUser">
        <input type="checkbox" lay-filter="ckStateUser" value="{{d.id}}" lay-skin="switch"
            lay-text="锁定|正常" {{d.userType==1?'checked':''}}/>
    </script>
    <!-- 表单弹窗 -->
    <script type="text/html" id="modelUser">
        <form id="modelUserForm" lay-filter="modelUserForm" class="layui-form model-form">
            <input name="id" type="hidden"/>
          <!--  <input name="userType" type="hidden"/>
            <input name="password" type="hidden"/>-->
            <div class="layui-form-item">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-block">
                    <input name="username" placeholder="请输入账号" type="text" class="layui-input" maxlength="20"
                        lay-verType="tips" lay-verify="required" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input name="realname" placeholder="请输入用户名" type="text" class="layui-input" maxlength="20"
                        lay-verType="tips" lay-verify="required" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                    <select id="roleName" name="sysRoleVO.id" class="layui-select" lay-verify="" lay-search>
                    </select>
                    <!-- <div class="layui-form-item">
                         <label class="layui-form-label">角色：</label>
                         <div class="layui-input-block">

                         </div>
                     </div>-->
                    <!-- <select name="roleId" lay-verType="tips" lay-verify="required">
                         <option value="">请选择角色</option>
                         <option value="1">管理员</option>
                         <option value="2">普通用户</option>
                         <option value="3">游客</option>
                     </select>-->
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-block">
                    <input name="phone" placeholder="请输入电话" type="text" class="layui-input" maxlength="20"
                           lay-verType="tips" lay-verify="required" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input name="email" placeholder="请输入邮箱" type="text" class="layui-input" maxlength="20"
                           lay-verType="tips" lay-verify="required" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">个性签名</label>
                <div class="layui-input-block">
                    <textarea name="personalSignature" placeholder="请输入内容" class="layui-textarea" maxlength="200"></textarea>
                </div>
            </div>
          <!--  <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男" checked/>
                    <input type="radio" name="sex" value="女" title="女"/>
                </div>
            </div>-->

            <div class="layui-form-item text-right">
                <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
                <button class="layui-btn" lay-filter="modelSubmitUser" lay-submit>保存</button>
            </div>
        </form>
    </script>
    <script src="../../../static/libs/layui/layui.js"></script>
    <script src="../../../static/js/common.js"></script>
    <script>
        layui.use(["layer","form","table","util","admin"],function () {  
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var util = layui.util;
            var admin = layui.admin;
            // 渲染表格
            var insTb = table.render({
                elem: '#tableUser',
                url: '/sysUserController/getUserList',
                page: true,
                toolbar: false,
                cellMinWidth: 100,
                cols: [
                    [
                    {type: 'numbers',fixed:"left",align:'center', title: '#'},
                    {field: 'username',align:'center', sort: true, title: '账号'},
                    {field: 'realname',align:'center', sort: true, title: '用户名'},
                    {field: 'phone',align:'center', title: '电话'},
                    {field: 'email',align:'center', title: '邮箱'},
                    {field: 'personalSignature',align:'center', title: '个性签名'},
                    {
                        field: 'createTime', sort: true,align:'center', templet: function (d) {
                            return util.toDateString(d.createTime);
                        }, title: '创建时间'
                    },
                    {field: 'userType',align:'center', sort: true, templet: '#tableStateUser', title: '状态'},
                    {fixed:"right", align:'center',toolbar: '#tableBarUser', title: '操作', minWidth: 200}
                ]
                ]
            });
            // 添加
            $('#btnAddUser').click(function () {
                showEditModel();
            });
            // 搜索按钮点击事件
            $('#btnSearch').click(function () {
                var key = $('#sltKey').val();
                var value = $('#edtSearch').val();
                table.reload('tableUser', {
                    where: {
                        searchKey: key,
                        searchValue: value
                    }
                });
            });
            // 工具条点击事件
            table.on('tool(tableUser)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
                if (layEvent === 'edit') { // 修改
                    showEditModel(data);
                } else if (layEvent === 'del') { // 删除
                    doDel(data.id, data.realname);
                } else if (layEvent === 'reset') { // 重置密码
                    resetPsw(data.id, data.userType,data.realname,data.username);
                }
            });
            // 显示表单弹窗
            function showEditModel(mUser) {
                admin.open({
                    type: 1,
                    skin: 'layui-admin-skin',
                    title: (mUser ? '修改' : '添加') + '用户',
                    content: $('#modelUser').html(),
                    success: function (layero, dIndex) {
                        $(layero).children('.layui-layer-content').css('overflow', 'visible');
                        var url = mUser ? '/sysUserController/updateUser' : '/sysUserController/insertUser';
                     /*   mUser && (mUser.roleId = mUser.roles[0].roleId);*/
                       //加载下拉框
                        $.ajax({
                            type: 'post',
                            url: 'sysPermissionsController/getRoleList',
                           // async: false,
                            data: null,
                            success: function (res) {
                                var selectData = res.data
                                for (var i in selectData) {
                                    if (mUser) {
                                        if (mUser.sysRoleVOId === selectData[i].id) {
                                            $("#roleName").append(new Option(selectData[i].roleName, selectData[i].id, null, true));
                                        } else {
                                            $("#roleName").append(new Option(selectData[i].roleName, selectData[i].id));
                                        }
                                    } else {
                                        $("#roleName").append(new Option(selectData[i].roleName, selectData[i].id));
                                    }
                                }
                                form.render('select');
                            }
                        });

                        // 回显数据
                        form.val('modelUserForm', mUser);
                        // 表单提交事件
                        form.on('submit(modelSubmitUser)', function (data) {
                            layer.load(2);
                            $.get(url, data.field, function (res) {
                                layer.closeAll('loading');
                                if (res.success) {
                                    layer.close(dIndex);
                                    layer.msg(res.msg, {icon: 1});
                                    insTb.reload({}, 'data');
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }, 'json');
                            return false;
                        });
                    }
                });
            }
            // 删除
            function doDel(userId, nickName) {
                layer.confirm('确定要删除“' + nickName + '”吗？', {
                    skin: 'layui-admin-skin',
                    shade: .1
                }, function (i) {
                    layer.close(i);
                    layer.load(2);
                    $.get('/sysUserController/deleteUser', {
                        id: userId
                    }, function (res) {
                        layer.closeAll('loading');
                        if (res.success) {
                            layer.msg(res.msg, {icon: 1});
                            insTb.reload({}, 'data');
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }, 'json');
                });
            }
            // 修改用户状态
            form.on('switch(ckStateUser)', function (obj) {
                layer.load(2);
                $.get('/sysUserController/updateUserType', {
                    id: obj.elem.value,
                    userType: obj.elem.checked ? 1 : 0
                }, function (res) {
                    console.log(obj.elem.checked ? 1 : 0)
                    layer.closeAll('loading');
                    if (res.success) {
                        layer.msg(res.msg, {icon: 1});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                        $(obj.elem).prop('checked', !obj.elem.checked);
                        form.render('checkbox');
                    }
                }, 'json');
            });
            // 重置密码
            function resetPsw(userId, userType,name,username) {
                layer.confirm('确定要重置“' + name + '”的登录密码吗？', {
                    skin: 'layui-admin-skin',
                    shade: .1
                }, function (i) {
                    layer.close(i);
                    layer.load(2);
                    $.get('/sysUserController/resetPassword', {
                        id: userId,
                        userType:userType,
                        username:username
                    }, function (res) {
                        layer.closeAll('loading');
                        if (res.success) {
                            layer.msg(res.msg, {icon: 1});
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }, 'json');
                });
            }
        })
    </script>
</body>
</html>